/**
* 左边菜单
*/
<template>
  <div id="leftnav">
    <div class="logobox">
      <img class="logoimg" src="static/img/logo1.png" alt="加载失败">
      <transition name="el-zoom-in-bottom">
        <label class="logotext" v-if="!collapsed">
          <el-divider direction="vertical"></el-divider>
          启 航 物 流
        </label>
      </transition>
    </div>
    <el-divider><i class="el-icon-s-operation"></i></el-divider>
    <el-menu
      unique-opened
      :collapse="collapsed"
      default-active="2"
      class="el-menu-vertical-demo"
      v-for="(menu1,index1) in allmenu"
      :key="menu1.id">
      <el-submenu :index="(index1+1)+''">
        <template slot="title">
          <i :class="menu1.pdAuthMenu.icon"></i>
          <span>{{ menu1.pdAuthMenu.name }}</span>
        </template>
        <!--          2-->
        <el-menu-item-group>
          <template slot="title">{{ menu1.pdAuthMenu.name }}</template>
          <!--          无三级 的 二级-->
          <router-link
            class="menuText"
            v-for="(menu2,index2) in menu1.pdMenu"
            v-if="menu1.pdMenu != null && menu2.pdMenu.length === 0"
            :key="menu2.id"
            :to="menu2.pdAuthMenu.path"
            @click.native="busHeadr([menu2.pdAuthMenu])">
            <el-menu-item :index="(index1+1)+'-'+(index2+1)" route>
              <i :class="menu2.pdAuthMenu.icon"></i>
              <span>
                {{ menu2.pdAuthMenu.name }}
            </span>
            </el-menu-item>
          </router-link>
          <!--          有三级 的 二级-->
          <el-submenu
            :index="(index1+1)+'-'+(index2+1)"
            v-for="(menu2,index2) in menu1.pdMenu"
            v-if="menu1.pdMenu != null && menu2.pdMenu.length !== 0"
            :key="menu2.id">
            <template slot="title">
              <i :class="menu2.pdAuthMenu.icon"></i>
              <span>{{ menu2.pdAuthMenu.name }}</span>
            </template>
            <!--            3-->
            <el-menu-item-group>
              <template slot="title">{{ menu2.pdAuthMenu.name }}</template>
              <router-link
                class="menuText"
                v-for="(menu3,index3) in menu2.pdMenu"
                :key="menu3.id"
                :to="menu3.pdAuthMenu.path"
                @click.native="busHeadr([menu2.pdAuthMenu,menu3.pdAuthMenu])">
                <el-menu-item :index="(index1+1)+'-'+(index2+1)+'-'+(index3+1)">
                  <i :class="menu3.pdAuthMenu.icon"></i>
                  <span>
                    {{ menu3.pdAuthMenu.name }}
                </span>
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import menu from "../api/basicfunction/basicmenu/menuAPI"

export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  methods: {
    menuTree() {
      menu.getMenu().then(({data}) => {
        this.allmenu = data.data
      })
    },
    busHeadr(data) {
      this.$store.commit("selectMenu", data);
      this.$root.Bus.$emit('animation', false) // 发送一个通知给home组件开始动画
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.menuTree();
    //菜单栏监听
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })
    //菜单栏监听修改后的消息
    this.$root.Bus.$on('menuUpdate', value => {
      this.menuTree();
    })
  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
}

.logobox {
  top: 0;
  z-index: 2;
  height: 35.5px;
  text-align: center;
}

.logotext {
  position: relative;
  top: -30%;
  font-size: 20px;
  font-family: youyuan, serif;
  font-weight: bold;
  margin: auto;

}

.logoimg {
  height: 100%;
  margin-top: 5px;
}

.menuText {
  color: black;
  text-decoration: none
}

.menuText:hover {
  color: black;
  text-decoration: none
}
</style>
